<template>
    <!-- <router-view/> -->
    <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/order' }">订单列表详情</el-breadcrumb-item>
    <el-breadcrumb-item >订单商品详情</el-breadcrumb-item>
    
    <!-- <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
  </el-breadcrumb>
    <el-card class="box-card">
    <template #header>
      <span class="maijia">买家信息</span>
      <div class="card-header">
        <span>用户名：{{good.list.name}}</span>
        <span>手机号：{{good.list.phone}}</span>
        <span>所在地区：{{good.list.address}}</span>
      </div>
    </template>
    <span class="maijia">订单信息</span>
    <div class="id">
      <span>订单编号：{{good.list.orderid}}</span>
      <span>订单类型：{{good.list.ordertype}}</span>
    </div>
    <div class="time">
      <span>创建时间：{{good.list.time}}</span>
      <span>付款时间：{{good.list.time}}</span>
    </div>
    <div class="bao">
      <span>交易号：{{good.list.deal}}</span>
      <span>支付方式：{{good.list.pay}}</span>
      <span>支付流水：{{good.list.water}}</span>
    </div>
    <el-card class="box1-card">
      <el-table :data="tableData.list" style="width: auto;height: 100%;">
        <el-table-column prop="goodname" label="商品信息" width="260" />
        <el-table-column prop="size" label="规格" width="180" />
        <el-table-column prop="price" label="单价" width="180" />
        <el-table-column prop="num" label="数量" width="180" />
        <el-table-column prop="allprice" label="商品总价" width="180"/>
      </el-table>
   </el-card>
  </el-card>
  
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, onMounted } from "@vue/runtime-core"
import axios from 'axios'
import {ref} from 'vue'
import {useRoute} from 'vue-router'
import { order_detail, order_good } from '../../../utils/api'
const good=ref({list:{}})
var $route=useRoute()
const tableData=ref({list:[]})
 onMounted(()=>{
  var order=$route.query.order 
  order_detail(order).then((res)=>{
    good.value.list=res.data.list
  })
  // axios.post('/api/order/detail',{goodid:order}).then((res)=>{
  //   good.value.list=res.data.list
  // })
  order_good(order).then((res)=>{
    tableData.value.list =res.data.list
    console.log(res.data.list)
    // 计算商品总价
    tableData.value.list.forEach((item)=>{
      item.allprice=item.price*item.num
    })
  })
  })
//   axios.post('/api/order/good',{id:order}).then((res)=>{
//     tableData.value.list =res.data.list
//     console.log(res.data.list)
//     // 计算商品总价
//     tableData.value.list.forEach((item)=>{
//       item.allprice=item.price*item.num
//     })
//   })
//  })
</script>

<style scoped>
.el-card__body{
  height: 100%;
}
.is-link:hover{
  font-weight: bold;
  color: blue;
}
.el-breadcrumb {
  height: 40px;
  margin-bottom: 10px;
  line-height: 40px;
}
.maijia {
  font-weight: bold;
  padding: 0 6px 0;
  border-left: 4px solid red;
}
.box1-card {
  width: 95%;
  margin: auto;
  height: 100%;
  margin-top: 120px;
}
.card-header {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
  color: gray;
  font-weight: bold;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
.id,.time,.bao {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin: 24px 0;
  font-size: 14px;
  color: gray;
  font-weight: bold;
}
.bao {
  width: 50%;
}
</style>